<template>
  <div class="homeContent">
    <div class="homeHeader">
      <van-tabs v-model:active="queryParams.workState" type="card" @click-tab="changeTab">
        <van-tab :title="item.text" :name="item.value" v-for="(item, index) in patrolStatus" :key="index"></van-tab>
      </van-tabs>
    </div>
    <div class="cardList">
      <van-pull-refresh v-model="refreshing" @refresh="onLoad('refresh')">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            class="listItem"
            v-for="(item, index) in listCard"
            :key="index"
          >
            <template #default>
              <div class="header">
                <div class="code">{{item.workId}}</div>
                <div class="time">{{ formatDate(item.workCreate) }}</div>
                <div
                  :class="`status ${getPatrolStatus(item.workState).class}`"
                >
                  {{ getPatrolStatus(item.workState).text }}
                </div>
              </div>
              <div class="title">{{item.workName}}</div>
              <div class="content">{{item.workDetail}}</div>
              <div class="btns">
                <div class="btn" @click="cardClick(item, 'work')">工单详情</div>
                <div class="btn blue" @click="cardClick(item, 'point')">巡查详情</div>
              </div>
            </template>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { getPatrolPage } from "@/api/identification";
import { patrolStatus, getPatrolStatus, formatDate } from "@/utils/common";
const router = useRouter();
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const listCard = ref([]);
const queryParams = reactive({
  current: 1,
  size: 10,
  workType: '0',
  workState: patrolStatus[0].value
});
const pages = ref(0);
onMounted(() => {
  getList();
});

const onLoad = (type = '') => {
  if (type === 'refresh') {
    finished.value = false;
    loading.value = true;
  }
  if (refreshing.value || type === "refresh") {
    pages.value = 0;
    queryParams.current = 1;
    listCard.value = [];
    refreshing.value = false;
  }
  if (type !==  "refresh") {
    if (queryParams.current >= pages.value) return
    queryParams.current++
  }
  getList();
};

const getList = () => {
  loading.value = true;
  let params = {
    ...queryParams,
  };
  getPatrolPage(params)
    .then((res) => {
      const {code, data} = res.data || {}
      if (code === 200) {
        pages.value = data.pages;

        let list = data?.records || []
        if (queryParams.current == 1) {
          listCard.value = list
        } else {
          listCard.value = listCard.value.concat(list)
        }

        if (queryParams.current == pages.value || pages.value == 0) {
          finished.value = true;
        }
      } else {
        finished.value = true;
      }
    })
    .catch((err) => {
      finished.value = true;
    })
    .finally(() => {
      loading.value = false;
    });
};

const changeTab = (v) => {
  const { name } = v;
  queryParams.workState = name;
  onLoad('refresh');
};
const cardClick = (row, type) => {
  if (type === 'work') {
    router.push({
      path: "/patrol/workDetail",
      query: {
        id: row.id
      }
    });
  }
  if (type === 'point') {
    router.push({
      path: "/patrol/detail",
      query: {
        id: row.id,
        row: JSON.stringify(row)
      },
    });
  }
  
};
</script>

<style scoped lang="less">
.homeContent {
  background: #f7f8f7;
  text-align: center;
  padding: 0 6px;
  height: 100%;
  .homeHeader {
    margin-top: 10px;
  }
  .cardList {
    margin: 10px 0;
    height: calc(100% - 80px);
    overflow-y: auto;
  }
}
.header {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 10px;
  text-align: left;
  .code {
    flex: 1;
  }
  .status  { 
    padding: 2px 6px;
    color: #1989fa;
    border: 1px solid #1989fa;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    margin-left: 10px;

    &.s1 {
      color: #ee7e34;
      border-color: #ee7e34;
    }
    &.s3 {
      color: #08c33b;
      border-color: #08c33b;
    }
  }

}
.listItem {
  background: #fff;
  border-radius: 10px;
  padding: 1px;
  margin-bottom: 10px;

  .title {
    font-size: 14px;
    text-align: left;
    margin: 6px 10px;
    color: #333;
  }
  .content {
    color: #c4c4c4;
    font-size: 12px;
    margin: 0 10px;
    text-align: left;
  }
}
 .btns {
    display: flex;
    margin-top: 15px;
    .btn {
      flex: 1;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #fff;
      background: rgba(#1989fa, 0.8);
      text-align: center;
      &.blue {
        background: #1989fa;
      }
      
      &:first-child {
        border-radius: 0 0 0 10px;
      }
      &:last-child {
        border-radius: 0 0 10px 0;
      }
    }
  }
</style>
